<template>
  <div class="create">
    <template v-if="currentPlugin && currentPlugin.id">
      <div class="plugin-chat">
        <div class="plugin-chat-header">
          <ArrowLeftOutlined @click="goBack" />
          <span style="margin-left: 20px; font-weight: 600">
            {{ currentPlugin.name }}
          </span>
        </div>
        <div class="plugin-chat-wrap">
          <ChatCore
            :visible="chatCoreVisible"
            :chatId="currentChatID"
            :showRecommendList="false"
            v-if="chatCoreVisible"
          />
        </div>
      </div>
    </template>
    <template v-else>
      <div class="plugin-list" v-if="pluginList.length > 0">
        <template
          v-for="(plugin, pluginIndex) of pluginList"
          :key="pluginIndex"
        >
          <div class="plugin-title">{{ plugin.cat_name }}</div>
          <a-row
            class="plugin-item-list"
            v-if="plugin.plugin_list && plugin.plugin_list.length > 0"
          >
            <a-col
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
              v-for="(item, index) of plugin.plugin_list"
              :key="index"
              style="min-width: 260px"
            >
              <a-tooltip>
                <template #title>{{ item.info || item.user_msg }}</template>
                <div class="plugin-item" @click="onPluginClick(item)">
                  <img :src="item.icon" alt="" class="plugin-item-icon" />
                  <div class="plugin-item-right">
                    <div class="plugin-item-name">{{ item.name }}</div>
                    <div class="plugin-item-intro">
                      {{ item.info || item.user_msg }}
                    </div>
                  </div>
                </div>
              </a-tooltip>
            </a-col>
          </a-row>
        </template>
      </div>
    </template>

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  ref,
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
import ChatCore from "../../components/ChatCore/index.vue";
import _ from "lodash";

export default defineComponent({
  name: "Create",
  components: { ChatCore, ArrowLeftOutlined },

  setup() {
    const route = useRoute();
    const router = useRouter();
    const cateId = ref(route.params.cateId || null);
    const pluginId = ref(route.query.pluginId || null);

    const state = reactive({
      currentPlugin: {},
      currentChatID: null,
      chatCoreVisible: false,
      loginVisible: false,
    });

    const list = ref([]);

    const getList = async () => {
      const res = await request.get("/work_ai", "/plugin/list", {});
      list.value = res.list;
    };

    const pluginList = computed(() => {
      return cateId.value
        ? list.value.filter((item) => item.id == cateId.value)
        : list.value;
    });

    const onPluginClick = (item) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        state.currentPlugin = item;
        let params = {
          title: item.name,
          system_msg: item.system_msg,
          user_msg: item.user_msg,
          plugin_id: item.id,
          team_id: utils.getCurrentTeam() || 0,
        };
        request
          .post("/work_ai", "/chat/add", {
            ...params,
          })
          .then((res) => {
            if (res.chat_id) {
              state.currentChatID = res.chat_id;
              state.chatCoreVisible = true;
            }
          });
      });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const goBack = () => {
      // 从工作台进来的
      if (route.query.isWork) {
        router.back();
        return;
      }
      state.chatCoreVisible = false;
      state.currentChatID = null;
      state.currentPlugin = {};
    };

    const init = async () => {
      await getList();

      if (pluginId.value) {
        const plugin = _.flatMapDeep(
          list.value,
          (item) => item.plugin_list
        ).find((item) => item.id == pluginId.value);

        if (plugin) {
          onPluginClick(plugin);
        }
      }
    };

    init();

    watch(
      () => route.path,
      () => {
        cateId.value = route.params.cateId || null;
        goBack();
      }
    );

    watch(
      () => route.query.pluginId,
      async () => {
        pluginId.value = route.query.pluginId || null;
        goBack();

        if (pluginId.value) {
          if (list.value.length == 0) {
            await getList();
          }

          const plugin = _.flatMapDeep(
            list.value,
            (item) => item.plugin_list
          ).find((item) => item.id == pluginId.value);
          if (plugin) {
            onPluginClick(plugin);
          }
        }
      }
    );

    return {
      ...toRefs(state),
      onPluginClick,
      loginCallback,
      goBack,
      pluginList,
    };
  },
});
</script>

<style lang="less" scoped>
.create {
  width: 100%;
  height: 100%;
  padding: 20px 10px;

  .plugin-list {
    .plugin-title {
      font-size: 16px;
      font-weight: 600;
      padding: 15px 10px;
    }
    .plugin-item-list {
      .plugin-item {
        padding: 15px 20px;
        background-color: #fff;
        border-radius: 6px;
        margin: 0 10px 20px 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: 0.2s ease;
        box-shadow: 0 0px 10px #193e7b14;

        &:hover {
          -webkit-transform: translateY(-3px);
          -ms-transform: translateY(-3px);
          transform: translateY(-3px);
          -webkit-box-shadow: 0 0 6px #999;
          box-shadow: 0 0 6px #999;
          -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
        }

        .plugin-item-icon {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }

        .plugin-item-right {
          width: calc(100% - 36px);
          padding-left: 10px;

          .plugin-item-name {
            font-weight: 600;
          }

          .plugin-item-intro {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999;
            font-size: 13px;
          }
        }
      }
    }
  }

  .plugin-chat {
    width: 100%;
    height: 100%;

    .plugin-chat-header {
      font-size: 18px;
      padding-bottom: 10px;
    }

    .plugin-chat-wrap {
      width: 100%;
      height: calc(100% - 40px);
    }
  }
}
</style>
